<style lang="less">
    .filltitle {
        text-align:center;
        line-height:28px;
        margin-bottom:20px;
        dt{
            font-size:16px;
        }
        dd{
            font-size:12px;
            color:#888;
        }
    }
    .billinfo-wrap {
        margin: 0.3rem;
        padding: 0.3rem;
        background-color:#fff;
        border-radius:5px;
        line-height:18px;
        font-size:14px;
        li{
            padding:0 0 8px;
        }
        span.title {
            width:1.5rem;
            display:inline-block;
        }
        span.info {
            color:#757575;
        }
        .spliter {
            height:0px;
            margin:8px 0 16px 0;
            border-bottom: 1px dashed #ccc;
        }
    }
    .w100 {
        width:100%;
    }
    .org {
        color: #ff7202 !important;
    }
</style>


<template>
    <div class="contain" v-if="BillInfo != null">
        <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
        <div class="detail-head-tip mb20" v-if="BillInfo == null">
            订单信息已失效或等待超时,请重新下单.
        </div>
        <div class="detail-head-tip mb20" v-else>
            订单已经生成，请在{{minutes | fulltime}}:{{seconds | fulltime}}内完成支付
        </div>

        <div class="filltitle">
            <dl>
                <dt>请仔细核对下列信息</dt>
                <dd>工作人员会根据这些信息进行课程安排，请确保无误</dd>
            </dl>
        </div>

        <ul class="billinfo-wrap">
            <li>
                <span class="title">学员姓名</span>
                <span class="info">{{BillInfo.G.Name}}</span>
            </li>
            <li>
                <span class="title">联系方式</span>
                <span class="info">{{BillInfo.G.Mobile}}</span>
            </li>
            <li>
                <span class="title">班级</span>
                <span class="info">{{BillInfo.G.Age | StdGrade}}</span>
            </li>
            <li>
                <span class="title">课程</span>
                <span class="info">{{todolist.className}}</span>
            </li>
            <li>
                <span class="title">所选时间</span>
                <span class="info">8月19日至25日每天{{todolist.time}}</span>
            </li>
            <li>
                <span class="title">区域</span>
                <span class="info">{{BillInfo.C}}</span>
            </li>
            <li>
                <span class="title">校区</span>
                <span class="info">{{todolist.schoolName}}</span>
            </li>
            <li>
                <span class="title">课室</span>
                <span class="info org">{{todolist.classRoomName}}</span>
            </li>
            <li>
                <span class="title">报名费用</span>
                <span class="info org">￥{{BillInfo.F.toFixed(2)}}</span>
            </li>

            <div class="spliter"></div>

            <!--<li>
                <span class="title">交易流水号</span>
                <span class="info">{{todolist.billSerrialNo}}</span>
            </li>-->
        </ul>

        <div class="agbtn btn-success" style="margin:0 0.3rem; display:block; height:45px; line-height:45px;" @click="InitPay">
            确认支付
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            showLoad: false,
            BillInfo: null,
            minutes:15,
            seconds:0,
            BillSerrialNo: '',
            classname: '',
            schoolname: '',
            todolist: {},
        }
    },

    watch: {
    },

    computed: {

    },

    methods:{
        getData(){
            var _this = this;
            var query = {
                Guid : this.BillInfo.E
            }
            this.showLoad = true;
            this.Ajax.post("GetBillInfo", query).then(function(resp) {
                _this.showLoad = false;
                if(resp.IsSuccess == true){
                    if(resp.Data.availableVolume > 0)
                    {
                        _this.todolist = resp.Data;
                        _this.startWatch();
                        sessionStorage.removeItem('BillInfo');
                    }
                    else
                    {
                        _this.$vux.toast.show({
                            type: "cancel", //success, warn, cancel, text
                            text: "您选所选定的课室已无空位，请返回重选",
                            onHide(){
                                _this.$router.push({
                                    path:'PickClass',
                                })
                            }
                        });
                    }
                }
            });
        },

        startWatch() {
            var _this = this;
            var time = window.setInterval(function () {
                var sec = _this.seconds*1;
                var min = _this.minutes*1;
                if (sec == 0 && min != 0) {
                    _this.seconds = 59;
                    _this.minutes -= 1;
                } else if (min == 0 && sec == 0){
                    _this.seconds = 0;
                    window.clearInterval(time);
                    sessionStorage.removeItem('BillInfo');
                    _this.$vux.toast.show({
                        type: "cancel", //success, warn, cancel, text
                        text: "订单信息已失效或等待超时,请重新下单",
                        onHide(){
                            _this.$router.push({
                                path:'PickClass',
                            })
                        }
                    });
                } else {
                    _this.seconds -= 1
                }
            },1000);
        },

        //初始化微信支付环境
        InitPay() {
            var self = this;
            if (typeof WeixinJSBridge == "undefined") {
                alert('WeixinJSBridge:undefined');
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                self.InvokePay();
            }
        },

        InvokePay(){
            var self = this;
            var attach = {
                xm: this.BillInfo.G.Name,
                dh: this.BillInfo.G.Mobile,
                xx: this.BillInfo.G.School,
                nj: this.BillInfo.G.Age,
                ks: this.BillInfo.E,
            }
            var query = {
                openid : localStorage.WeChatOpenId, //openid
                fee : 0.01, //金额
                itemname : "礼包",
                attach : JSON.stringify(attach),
            };
            var sq = {
                ClassRoomGuid: this.BillInfo.E
            }
            this.showLoad = true;

            this.Ajax.post("PreCheckBuy", sq).then(function(resp) {
                if(!resp.IsSuccess){
                    self.showLoad = false;
                    self.$vux.toast.show({
                        type: "cancel", //success, warn, cancel, text
                        text: resp.ErrorMessage,
                        onHide(){
                            self.$router.push({
                                path:'PickClass',
                            })
                        }
                    });
                } else {
                    
                // alert(localStorage.WeChatOpenId);
                // alert(JSON.stringify(query));

                    self.Ajax.post("WxPay", query).then(function(resp) {
                        // self.showLoad = false;
                        if(resp.IsSuccess)
                        {
                            var json = resp.Data;
                            self.$vux.toast.show({
                                type: "text", //success, warn, cancel, text
                                text: resp.Data.msg,
                                onHide(){
                                    self.onBridgeReady(json);
                                }
                            });
                        }
                        else
                        {
                            self.showLoad = false;
                            self.$vux.toast.show({
                                type: "warn", //success, warn, cancel, text
                                text: resp.ErrorMessage,
                                // onHide(){
                                //     window.location.href = 'http://wx.yilaibaobei.com/wx.html';
                                // }
                            });
                        }
                    });
                }
            })


        },

        //调用微信支付模块
        onBridgeReady(json) {
            var self = this;
            WeixinJSBridge.invoke(
            'getBrandWCPayRequest', {
                "appId": json.appId,     //公众号名称，由商户传入
                "timeStamp": json.timeStamp,         //时间戳，自1970年以来的秒数
                "nonceStr": json.nonceStr, //随机串
                "package": json.packageValue,
                "signType": "MD5",         //微信签名方式:
                "paySign": json.paySign //微信签名
            },
           function (res) {
               if (res.err_msg == "get_brand_wcpay_request:ok") {
                    //alert("支付成功,请稍后查询余额,如有疑问,请联系管理员.");
                    //走支付完成逻辑
                    self.$router.push({
                        path:'FillInfo',
                    })
                }
                // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
           });
        }

    },

    created(){
        var _this = this;
        if(sessionStorage.BillInfo != '' && sessionStorage.BillInfo != null)
        {
            this.BillInfo = JSON.parse(sessionStorage.BillInfo);
            this.getData();
        }
        else
        {
            this.$vux.toast.show({
                type: "cancel", //success, warn, cancel, text
                text: "订单信息已失效或等待超时,请重新下单",
                onHide(){
                    _this.$router.push({
                        path:'PickClass',
                    })
                }
            });
        }

    },
}
</script>
